<!--
 * @Author: Wushiqi
 * @Descripttion: 操作记录对话框
 * @Date: 2020-08-06 18:00:18
 * @LastEditor: Wushiqi
 * @LastEditTime: 2021-04-28 18:11:04
-->
<template>
  <div>
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :show="show"
      :close-on-click-modal="false"
      title="操作记录"
      class="record-dialog"
      width="70%"
      @close="$emit('update:show', false)"
    >
      <load-table :data="recordTable" height="100%" :columns="columns" />
    </el-dialog>
  </div>
</template>

<script>
/**
 * 使用方法：
   <operation-dlg :show.sync="recordDlg" :record-table="recordTable" />
 */
import '@/common/common'
import LoadTable from './LoadTable'

export default {
  name: 'OperationDlg',
  components: { LoadTable },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    recordTable: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: this.show
    }
  },
  computed: {
    columns() {
      return [
        { type: 'index', label: '序号', width: '50px' },
        { prop: 'createTime', label: '操作日期', minWidth: '18%', toolTip: true },
        { prop: 'functionCodeName', label: '操作功能', minWidth: '10%', toolTip: true },
        { prop: 'content', label: '操作内容', width: this.flexColumnWidth('content', this.recordTable, 550) },
        { prop: 'userName', label: '操作人员', minWidth: '12%', toolTip: true }
      ]
    }
  },
  watch: {
    show(val) {
      this.visible = val
    }
  }
}
</script>
<style lang="scss">
.record-dialog {
 .el-dialog__header {
    padding-bottom: 3px;
  }
  .el-dialog__body {
    padding: 3px 7px;
    height: calc(100vh - 160px);
    vertical-align: middle;
  }
}
</style>
